import React from 'react';
import {Menu} from 'antd';
import '../../../css/nav/nav.css'
import {
    UserOutlined, DesktopOutlined, SettingOutlined, ShopOutlined,
    UsergroupAddOutlined, BulbOutlined, CoffeeOutlined, PayCircleOutlined
} from '@ant-design/icons';


const {SubMenu} = Menu;

class Nav extends React.Component {
    state = {
        current: 'login',
    };

    handleClick = e => {
        console.log('click ', e);
        this.setState({current: e.key});
    };

    render() {
        const {current} = this.state;
        return (
            <Menu className={"menu-nav"} onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
                <Menu.Item key="login" icon={<UserOutlined/>}>
                    登录
                </Menu.Item>
                <Menu.Item key="tourist" icon={<DesktopOutlined/>}>
                    游客模式
                </Menu.Item>

                <Menu.Item key="market" icon={<ShopOutlined/>}>
                    周边商城
                </Menu.Item>
                <SubMenu key="about" icon={<SettingOutlined/>} title="关于我们">
                        <Menu.ItemGroup title="团队">
                            <Menu.Item key="setting:1" icon={<UsergroupAddOutlined/>}>加入我们</Menu.Item>
                            <Menu.Item key="setting:2" icon={<BulbOutlined/>}>意见反馈</Menu.Item>
                        </Menu.ItemGroup>
                        <Menu.ItemGroup title="合作">
                            <Menu.Item key="setting:3" icon={<CoffeeOutlined/>}>商业合作</Menu.Item>
                            <Menu.Item key="setting:4" icon={<PayCircleOutlined/>}>我要投资</Menu.Item>
                        </Menu.ItemGroup>
                </SubMenu>
            </Menu>
        );
    }
}

export default Nav;